Summary
K/DA is a virtual K-Pop group from the video game League of Legends, consisting of the characters: Ahri, Akali, Evelynn, and Kai'sa. K/DA Code: Pink is a fan concept inspired by aesthetics found in cyberpunk and Y2K, with a nightclub/spy mission twist. In this project, I collaborated with other artists/designers to expand on their concept to create a packaged concept event, with the goal of emulating Riot Games style as closely as possible for their promotional social media graphics and client UI/UX design, to excite and engage the League of Legends players and fanbase.
Idea
How can I create a UX design and social media graphics with pre-existing IP to build hype and promote the K/DA Code: Pink as a fresh new concept that still resonates with League of Legends brand and audience?
Design Challenge
In my journey, I created many iterations for the UX client prototype using Figma and heavily brainstormed ideas for the promotional graphics. I tried to stay true to the style and vibe of K/DA and the League of Legends client while also creating something fresh and original. I used official typefaces, icons, and imagery for some of my assets to support my own designs and try to make it look as official as possible. I focused on creating hierarchy in the clients design, which also helped give it some personality. I often referenced work by Mark Bryner, Valorant Visual Designer, and Bruno Galvani, a Senior Visual Designer for League of Legends. Their portfolios helped me through my process so I could stay close to home with the style of Riot's games while also making sure to not repeat anything that has been done previously.
ROLE
UI/UX, Visual design, Wireframing, Prototyping, Social Media
DATE/DURATION
Oct 2023- Nov 2023 | 2-3 Weeks
TOOLS
Figma, Photoshop
TEAM
Splash arts by @emriikun
Initial concept, animation, emotes, ward by @richydraws
In-game concepts, VFX, borders by @youmyoom
UI/UX, Visual design, Wireframing, Prototyping, Social Media
DATE/DURATION
Oct 2023- Nov 2023 | 2-3 Weeks
TOOLS
Figma, Photoshop
TEAM
Splash arts by @emriikun
Initial concept, animation, emotes, ward by @richydraws
In-game concepts, VFX, borders by @youmyoom
UI/UX Design, Promotional graphics by @niyuart (Nina Campbell)
WHY
Passion Project
WHY
Passion Project
My Role
LOL Client Hub UI/UX Design
For the client hub, I wanted to highlight the new skins so I made them front and center on the landing page, with the ability to switch between the skins that are displayed through the icons below that align with each character. There is a first time interstitial page that players will see for one time only when they log in after the event is launched. Then it takes the players to a page highlighting K/DA's new comeback, featuring the individual skins, skin sets, merch, the music video, and album information.
WALKTHROUGH
PROTOTYPE
Click this link to view the prototype in a new window to also have access to external links, or use the embed below, but the embed does not have access to external links.
Some graphics may take a second to load, press R to restart the prototype if needed.
KEY SCREENS
Album Cover Design
I found it difficult to conceptualize an album cover and back with the limitations in visuals I had but I referenced other sources of inspiration, the concept art, and tied it back to the design of the client to keep the look cohesive. Although the artists I had collaborated with previously made a logo, I wanted to reconceptualize the typography to something with more usability in different situations, and they gave me the freedom to so. I also wanted to keep in brand with the holographic visual and bold san-serifs that was seen in All Out, their previous album. I utilized the splash arts in the album cover plus the textures and components I created. I also conceptualized the tracklist myself with song titles that felt resonated with the characters and the vibe of the concept.
Social Media Graphics
I specifically wanted to create graphics to build audience hype for the album with teasers. I think a big thing surrounding dedicated fanbases is knowing how to build hype and tease the audience and slowly handout more information as time passes. That was the goal of these graphics for the pre-release, to keep the beginning more ambiguous and cryptic but then revealing more as time passes.
PRE-RELEASE TEASERS
Music Video Thumbnail
I referenced both the new Heartsteel music video thumbnail and K/DA's previous thumbnails to create this. I wanted it to look familiar but I continued to implement the visual style and components that I used previously.
Design Process
Constraints
I was best able to form my design thinking process and decisions around the constraints of the project.
VISUAL DESIGN
Similar to League of Legends current design system
EXPERIENCE TYPE
Desktop experience
INTEGRATION
Integrate visual designs and content from previous event's clients and the League of Legends brand
FEASABILITY
Keep the designs familiar with pre-existing components from the League client
Researching & Identifying the Audience
The main player base for League of Legends is predominantly young adult men, but the role of women in the gaming industry is steadily expanding, especially post-pandemic. Recognizing this shift, it's important to note that players also have diverse interests, including anime, K-pop, cosplay, and esports. While there's already an established concept, my goal was to ensure that the client design aligned with the evolving needs and expectations of the player audience. To gauge successessful design choices, I closely examined past client designs and campaigns, as well as the collective response of users reactions the the KDA Code:Pink concept on Reddit forums or comment sections like on YouTube.
In my approach, I frequently referred to Riot's previous campaigns and events to ensure I was on the right track. My design decisions were influenced by how these earlier concepts resonated with the audience. Acknowledging the mixed emotional reactions towards the current League client, I'm committed to crafting a client that genuinely appeals to the audience's preferences and expectations.
Sketching & Ideating
I started with sketches initially of immediately what came to mind for this idea. I also moodboarded to get more inspiration and guidance for the visual aesthetic and design. After some brainstorming, I spent some time concepting ideas for the client landing page. I feel that my sketches tend to be very loose and brief, and after I get that brief idea out on paper I continue conceptualizing on the screen with more defined elements.
Low Fidelity Landing Page Concepts & User Feedback
I started this project focusing on a Women's History Month event with the new K/DA skins being featured, similar to prior events such as Pride Month or Lunar New Year. I aimed to attract female players, but after feedback, I decided to make K/DA the main focus. I believe this concept can empower and appeal to women without being too obvious. With a mostly male player base, the original idea might not have met everyone's needs. As a fan and player, I often want more girly skins in games so, without being too direct, I think this could meet the needs of Riot Games' female audience and LGBTQ+ community, while also appealing to men. However, I struggled with where to place content on the page, not wanting it to feel generic. To fix this, I kept trying new things in different iterations, referencing successful work, and asking for feedback until I was satisfied with the design.
With initial user feedback for the first concept and prototype, from peers who are also apart of the League community, the idea wasn't particularly striking or cohesive with the idea of KDA Code:Pink, and there was frankly too much of information on the landing pages I designed. The lack of hierarchy and lack of cohesion of the ideas, proved to be unappealing and overwhelming to users, as well as confusing.
Revised Low Fidelity Prototype & A/B Usability testing
To solve this issue, I changed the concept into something a bit more straightforward and streamlined: focusing purely on the KDA Code:Pink skinline. Initially, the main feature was a potential video, with other frames related to event parts. But, it lacked hierarchy and wasn't eye-catching or particularly unique compared to previous client designs, so I simplified the content and created a clearer hierarchy by making the main feature highlight the new skins. Based on additional user testing and feedback, changing from a Women's History Month event to a purely promotional K/DA event was more successful, with more positive engagement.
Using A/B testing, I had 3 different people test the Version A of the prototype and 3 other people test Version B of the prototype. Version A and B of the landing page/internal pages contained equally the same content, but the format was different. Version A was more simplified and straightforward, with the headline and copy in a frame above the content. Version B, however, kept the frame used in the interstitial page and turned the character icons at the bottom of the screen into clickable buttons which would reveal the skin that represents the character, and the headline and copy would be placed on the side while the skins were front and center. Version B proved to have more engagement and positive feedback, particularly with the idea of the character icons also being clickable buttons, which made it stand out from previous client designs, as opposed to Version A which was more expected and also less visually engaging.
Final High Fidelity User Flow & Usability Test
I established the final user flow with the high fidelity designs after making finishing touches from additional user testing and feedback. The client was very digestible and I tested 3 individuals who were able to navigate the client easily and from there I finalized the design.*
*The skin set pop-up window is conceptual and does not actually show in prototype
*The skin set pop-up window is conceptual and does not actually show in prototype
Visual Design & UI Components
While I took the official icons and character signatures made by Riot for each character, all other UI assets were created by me. I stuck with a color palette limited to hues of purple and pink gradients, and added glow or color change for components when they would be hovered. As I studied previous client designs I noticed that the interactiveness of hovering over content was a vital detail of the user experience and I wanted to stay true to that effect. Some of the typography I chose were taken directly from the League of Legends official typography such as on the buttons, but for other typography I chose the typefaces based on what I thought would work well with the concept.
For the button and frame designs, I tried to stay true to the concept of the elegant, y2k spy mission aesthetic that was established, so some of the frames resemble more of a high-tech coding interface while others have more of that elegant charm that is seen in the skin splash arts.
For the button and frame designs, I tried to stay true to the concept of the elegant, y2k spy mission aesthetic that was established, so some of the frames resemble more of a high-tech coding interface while others have more of that elegant charm that is seen in the skin splash arts.
Initial Concept Designs
By @emriikun, @richydraws, @youmyoom
Concept Art
Visual Animation
Splash Art
In-Game Concepts & VFX
Icons & Extra Cosmetics
Social Media Campaign Engagement
I made a series of promotional tiktok videos for the concept and my part of the project in which it has received widespread positive feedback and engagement! Altogether the videos have over 1M+ views and counting! I am super happy that this is something people enjoyed seeing and that's exactly what my intention was, to engage and inspire. Sadly, I also disappointed a lot of people that it wasn't real but I was able to achieve that level of authenticity and professionalism that I was going for. I even got recognition from one of the creative directors at Riot Games, Elie Lehman (Fielding), and the project was seen internally by several Rioters!
Reflection
Completing my part of the project has brought me immense satisfaction, especially seeing how the designs have come together. Crafting an interactive prototype for the client and promotional graphics has truly unified the concept, giving it an authentic feel. Along the way, I navigated challenges such as visual constraints, maintaining a consistent visual style, and optimizing space on the client hub to prioritize essential information. Despite these hurdles, the experience has been incredibly rewarding and educational.
As a devoted League of Legends player and Riot Games enthusiast, working on this passion project was a joy. My initial admiration for events like K/DA All Out, Star Guardian, and Spirit Blossom in League of Legends fueled my interest in graphic design, eventually leading me to pursue it as a major in school. Throughout this design process, I faced various challenges and engaged in extensive brainstorming, but I relished the opportunity for growth. One significant takeaway from designing this conceptual event is the importance of considering player expectations and avoiding visual overload in UI/UX design, in other words, the simpler, the better. Navigating the complexities of UI/UX, I aimed to create something both fresh and familiar for League of Legends players. Information architecture posed an initial challenge, and conceptualizing new, clean, unique, and eye-catching UI components while staying true to Riot's style required thoughtful consideration. Usability testing and user feedback from people familiar with the game and its events played a pivotal role in organizing information on the screen without overwhelming clutter.
If I had more time or had to redo this project, I think one thing I would've liked to do is design a page for the skin set pop-ups, similar to how you see skin sets in the shop, or even create a whole new visual design for that page to elevate the concept. I think I would've also liked to expand on the event as a whole to include more internal pages and features such as an event pass or loot bundles, like in previous Riot skin events. I made the intentional decision to keep the page more simple in amount of content I was designing for, and took a bit of a different approach since it was focused on promoting K/DA as a music group. With that in mind, I thought it was feasible to have buttons linking to merch, the album, and the music video, but looking back I think including other event features would've been cool as well!
In the end, I am thrilled to have expanded on this fan concept alongside fellow artists. The experience has ignited a desire to contribute to the video game industry, particularly in designing events that inspire and engage the player base.
